<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width: 240px;" v-model="employeeStore.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="employeeStore.getLoad">查 询</el-button>
      <el-button type="warning" @click="employeeStore.reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px; display: flex; align-items: center;">
      <el-button type="primary" @click="employeeStore.handleAdd">新 增</el-button>
      <el-button type="danger" @click="employeeStore.deleteBatch">批量删除</el-button>
      <el-upload
          style="display: inline-block; margin: 0 10px"
          action="http://localhost:8080/employee/import"
          :show-file-list="false"
          :on-success="importSuccess"
      >
        <el-button type="success">导 入</el-button>
      </el-upload>
      <el-button type="warning" @click="exportData">导 出</el-button>      
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-table stripe :data="employeeStore.options" strip @selection-change="employeeStore.handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="账号" prop="username" />
        <el-table-column label="头像">
          <template #default="scope">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" style="display: block; width: 40px; height: 40px; border-radius: 50%;">
            <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="width: 40px; height: 40px; border-radius: 50%;">
          </template>
        </el-table-column>
        <!-- <el-table-column label="角色" prop="role" /> -->
        <el-table-column label="名称" prop="name" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="工号" prop="no" />
        <el-table-column label="年龄" prop="age" />
        <el-table-column label="个人介绍" prop="description" show-overflow-tooltip />
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
              <el-button style="vertical-align: middle" type="primary" :icon="Edit" circle @click="employeeStore.handleUpdate(scope.row)"></el-button>
              <el-button style="vertical-align: middle" type="danger" :icon="Delete" circle @click="employeeStore.handleDelete(scope.row.id)"></el-button>
            </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <el-pagination
        @change="employeeStore.getLoad"
        v-model:current-page="employeeStore.pageNum"
        v-model:page-size="employeeStore.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="employeeStore.total"
      />
    </div>
    <el-dialog v-model="employeeStore.formVisible" title="员工信息" width="500" destroy-on-close>
      <el-form ref="formRef" :rules="rules" :model="employeeStore.form" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input :disabled="employeeStore.form.id !=null" v-model="employeeStore.form.username" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-select style="width: 100%;" v-model="employeeStore.form.departmentId">
            <el-option v-for="item in employeeStore.departmentList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            list-type="picture"
            action="http://localhost:8080/files/upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">上传头像</el-button> 
          </el-upload>  
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="employeeStore.form.name" autocomplete="off" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="employeeStore.form.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工号" prop="no">
          <el-input v-model="employeeStore.form.no" autocomplete="off" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="employeeStore.form.age" :min="18" autocomplete="off" placeholder="请输入年龄" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="主要描述" prop="description">
          <el-input v-model="employeeStore.form.description" type="textarea" autocomplete="off" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="employeeStore.formVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useEmployeeStore } from '@/store/employeeStore';
import { onMounted, ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { departmentListApi } from '@/api/departmentList';


const employeeStore = useEmployeeStore();
const formRef = ref();
const importSuccess = (res) => {
  if (res.code === '200') {
    ElMessage.success('批量导入数据成功')
    employeeStore.getLoad()
  } else {
    ElMessage.error(res.msg)
  }
}

const exportData = () => {
  window.open("http://localhost:8080/employee/export")
}
// 表单校验规则
const rules = {
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '账号长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  no: [
    { required: true, message: '工号不能为空', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '年龄不能为空', trigger: 'blur' }
  ]
};
const handleAvatarSuccess = (res) => {
  if (res.code === '200' && res.data) {
    employeeStore.form.avatar = res.data; // 将上传的头像 URL 赋值给表单
    ElMessage.success('头像上传成功');
  } else {
    ElMessage.error('头像上传失败');
  }
};
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 5; // 限制文件大小为 2MB

  if (!isImage) {
    ElMessage.error('只能上传图片文件');
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB');
  }

  return isImage && isLt2M;
};
// 保存操作
const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(employeeStore.form);
      
      employeeStore.save(); // 调用 store 中的保存方法
    } else {
      ElMessage.error('请填写完整的表单信息');
    }
  });
};

onMounted(() => employeeStore.getLoad());
// onMounted(() => init())
</script>